<template>
	<div>
		<a-card style="margin-top: 12px;">
			<div>
				<a-form-model layout="horizontal" :model="form" ref="queryForm" :labelCol="{span: 8}"
					:wrapperCol="{span: 16, offset: 0}">
					<div class="fold">
						<a-row>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="终端编号" prop="terminalCode">
									<a-input v-model="form.terminalCode" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="类型" prop="type">
									<a-select allowClear v-model="form.type"
										:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
										<a-select-option v-for="item in dict.type" :key="item.key" :value="item.value">
											{{item.title}}
										</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="上报时间" prop="createTime">
									<a-range-picker :allowClear="false"
										:ranges="{ 今天: [moment(), moment()], '本月': [moment().startOf('month'), moment().endOf('month')] }"
										v-model="form.createTime" :format="format" :valueFormat="format"
										style="width: 100%" :placeholder="['开始时间', '结束时间']" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row type="flex" justify="end">
							<a-button @click="submitForm" type="primary">查询</a-button>
							<a-button @click="resetForm" style="margin-left: 8px">重置</a-button>
						</a-row>
					</div>
				</a-form-model>
			</div>
		</a-card>
		<a-card style="margin-top: 12px;">
			<a-row>
				<a-col :xxl="4" :lg="4"
					:class="[isFold ? 'animation fold-tree': 'animation', isFold ? '' : 'padding-right-12']">
					<a-spin :spinning="treeLoading">
						<div style="min-height: 600px;overflow-y: auto;overflow-x: hidden;">
							<a-tree :show-icon="true" :show-line="false" :tree-data="organizationTreeData"
								:expandedKeys.sync="expandedKeys" @select="onClickTreeNode">
								<template slot="title" slot-scope="item">
									<span v-if="item.type == 0">
										<a-icon type="bank" /> {{item.customTitle}}
									</span>
									<span v-else-if="item.type == 1">
										<a-icon type="shop" /> {{item.customTitle}}
									</span>
									<span v-else-if="item.type == 2">
										<a-icon type="apartment" /> {{item.customTitle}}
									</span>
									<span v-else>
										<a-icon type="question-circle" /> {{item.customTitle}}
									</span>
								</template>
							</a-tree>
						</div>
					</a-spin>
				</a-col>
				<a-col :xxl="20" :lg="20" :class="isFold ? 'animation fold-table': 'animation'">
					<div>
						<div>
							<a-button class="space-vertical" @click="foldAction">{{isFold ? `展开` : `折叠`}}</a-button>
							<a-button class="space-vertical" @click="exportAction" type="primary"
								v-auth="`logDevice:logDeviceConnect:export`">导出</a-button>
						</div>
						<standard-table ref="table" :size="`middle`" :page="page" :pageSize="pageSize" :total="total"
							:loading="loading" :columns="columns" :dataSource="dataSource" @onPageChange="onPageChange">
							<div slot="type" slot-scope="{text}">
								<span>{{text | dictFilter(dict.type)}}</span>
							</div>
						</standard-table>
					</div>
				</a-col>
			</a-row>
		</a-card>
	</div>
</template>

<script>
	import StandardTable from '@/components/table/standard-table'
	import moment from 'moment'
	import {
		logDeviceConnectService
	} from '@/services'
	import {
		tableToExcel
	} from '@/utils/excel-util'

	const columns = [{
			title: '序号',
			dataIndex: 'no',
			width: 80,
			scopedSlots: {
				customRender: 'no'
			}
		},
		{
			title: '所属机构',
			dataIndex: 'organizationName',
			width: 150
		},
		{
			title: '终端编号',
			dataIndex: 'terminalCode',
			width: 180
		},
		{
			title: '类型',
			dataIndex: 'type',
			width: 80,
			scopedSlots: {
				customRender: 'type'
			}
		},
		{
			title: '上报时间',
			dataIndex: 'createTime',
			width: 160
		},
	]
	export default {
		name: 'LogDeviceConnect',
		components: {
			StandardTable
		},
		data() {
			return {
				format: 'yyyy-MM-DD',
				isFold: false,
				loading: false,
				treeLoading: false,
				page: 1,
				pageSize: 10,
				total: 0,
				columns: columns,
				dataSource: [],
				organizationTreeData: [],
				expandedKeys: [],
				form: {
					terminalCode: undefined,
					createTime: [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format(
						'yyyy-MM-DD')],
					organizationId: undefined
				},
				dict: {
					type: []
				}
			}
		},
		filters: {
			dictFilter: (val, dictList) => {
				const dict = dictList.find(item => item.value == val)
				return dict ? dict.title : '未知'
			}
		},
		authorize: {
			exportAction: 'logDevice:logDeviceConnect:export'
		},
		methods: {
			moment,
			foldAction() {
				this.isFold = !this.isFold
			},
			reloadTable() {
				this.page = 1
				this.queryListAction()
			},
			onClickTreeNode(selectedKeys) {
				this.form.organizationId = selectedKeys[0]
				this.reloadTable()
			},
			onPageChange(pagination) {
				this.page = pagination.current
				this.pageSize = pagination.pageSize
				this.queryListAction()
			},
			resetForm() {
				this.$refs.queryForm.resetFields()
				this.form.createTime = [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format(
					'yyyy-MM-DD')]
				this.reloadTable()
			},
			submitForm() {
				this.reloadTable()
			},
			exportAction() {
				// this.$message.success('敬请期待!')
				logDeviceConnectService.exportExcel(null).then(res => {
						const result = res.data
						if (result.code === 200) {
							let columns = this.$refs.table.columns;
							let widths = []
							for (var i = 0; i < columns.length; i++) {
								widths.push({
									wpx: columns[i].width
								})
							}
							tableToExcel(document.querySelector('table'), widths, '终端连接日志')
						}
					}).finally(this.loading = false)
			},
			queryListAction() {
				this.loading = true
				const params = {
					page: this.page,
					pageSize: this.pageSize,
					queryParams: this.form
				}
				logDeviceConnectService.queryList(JSON.stringify(params)).then(res => {
					const result = res.data
					if (result.code === 200) {
						this.dataSource = []
						this.dataSource = result.data.records
						this.total = result.data.totalCount
					}
				}).finally(this.loading = false)
			},
			queryOrganizationAction() {
				this.treeLoading = true
				logDeviceConnectService.queryOrganizationTree().then(res => {
					const result = res.data
					if (result.code === 200) {
						this.organizationTreeData = result.data
						this.expandedKeys = []
						this.expandAllTreeNode(this.organizationTreeData, this.expandedKeys)
					}
				}).finally(this.treeLoading = false)
			},
			expandAllTreeNode(originData, targetData) {
				originData.forEach(item => {
					targetData.push(item.key)
					if (item.children && item.children.length > 0) {
						this.expandAllTreeNode(item.children, targetData)
					}
				})
			}
		},
		created() {
			this.getDict(JSON.stringify({
				code: 'TERMINAL_CONNECT_TYPE'
			})).then(res => this.dict.type = res.data.data)
			this.queryOrganizationAction()
			this.reloadTable()
		}
	}
</script>
<style scoped lang="less">
	.ant-form-item {
		margin-bottom: 12px;
	}

	.fold {
		width: calc(100% - 12px);
		display: inline-block;
	}

	@media screen and (max-width: 900px) {
		.fold {
			width: 100%;
		}
	}

	.animation {
		transition: 0.5s;
		-webkit-transition: 0.5s;
	}

	.fold-tree {
		width: 0%;
	}

	.fold-table {
		width: 100%;
	}
</style>
